
<template>
  <section class="container">
    <img src="/test.png" alt="Nuxt.js Logo" class="logo" />
    <h1 class="title">
      People
    </h1>
    <div class="info">
      <p> name: {{ people.name }}<p/>
      <p> id: {{ people.id }}  </p>
    </div>
  </section>
</template>


<script>
import domain from '~/plugins/domain'
import axios from '~/plugins/axios'

async function get(id){
  const {data} = await axios.get('/people/' + id);
  return data;
}

export default {

  data(){
     return {
       name:'',
       id:''
     }
  },
  async asyncData ({ params, error }) {
      let people = await get(params.info);
      return {people};
  },
  head () {
    return {
      title: `People: ${this.people.name}`
    }
  }
}
</script>

<style scoped>

.title
{
  margin-top: 30px;
}

.info
{
  color: #9aabb1;
  margin: 0 auto;
  text-align: left;
  width: 400px;
}

</style>
